<template>
  <view class="text-load">
    <uni-transition ref="oTransition" :styles="{ width: '100%', height: '40rpx', overflow: 'hidden' }" :show="true">
      <view class="transition-inner">{{ text }}</view>
    </uni-transition>
    <view class="btn-groups" @click="handleClick">
      <view class="show" v-show="isHide">展开</view>
      <view class="hide" v-show="!isHide">收起</view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref } from "vue";

defineProps({
  text: { type: String, default: '' }
})

const oTransition = ref(null) as any;

//  用于判断当前是否是隐藏状态
const isHide = ref(true);

const handleClick = () => {
  if (isHide.value) {
    //  当前是隐藏状态 需要打开
    console.log(oTransition.value);
    oTransition.value.step(
      {
        height: "auto",
      },
      {
        timingFunction: "linear",
        duration: 150,
      }
    );

    oTransition.value.run();
  } else {
    oTransition.value.step(
      {
        height: "40rpx",
      },
      {
        timingFunction: "linear",
        duration: 150,
      }
    );

    oTransition.value.run();
  }

  isHide.value = !isHide.value;
};
</script>

<style lang="scss" scoped>
.text-load {
  width: 100%;

  .transition-inner {
    color: #666666;
  }

  .btn-groups {
    margin-top: 10rpx;
    
    .show {
      color: #d38f59;
    }

    .hide {
      color: rgb(64, 158, 255);
    }
  }
}
</style>